<script setup lang="ts">
import {OrderForm, OrderPrinterVo} from "@/api/order/types";
import {printerOrder, statPrinterData} from "@/api/order/index";

const props = defineProps({

  orderId: {
    type: String,
    default: "",
  },

  pFilter: {
    type: Object,
    default: () => ({})
  },

  printerType: { //打印类型
    type: String,
    default: "order"
  },

  visible: {
    type: Boolean,
    default: false,
  },
});

const lists = ref<OrderPrinterVo[]>();
const printerList = ref<any[]>();
const stallList = ref<any[]>();
const total_product = ref(0);
const total_order = ref(0);
const loading = ref(false); //  加载状态
watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      loading.value = true
      statPrinterData(props.pFilter).then((res) => {
        lists.value = res.data.items || [];
        printerList.value = res.data.printerList || [];
        stallList.value = res.data.stallList || [];
        total_product.value = res.data.total_product || 0;
        total_order.value = res.data.total_order || 0;
      }).finally(() => {
        loading.value = false;
      })
    }
  })

const order = reactive<OrderForm>({});
const stepActive = ref(0);
const drawer = ref(false)
const drawer2 = ref(false)
const printer_id = ref<number | undefined>();
const stallIds = ref<Number[]>([]);

const emit = defineEmits(["close"]);

function close() {
  drawer2.value = false;
  lists.value = [];
  stallIds.value = [];
  printer_id.value = undefined;
  total_product.value = 0;
  total_order.value = 0;
  emit("close");
}

function confirmClick() {
  drawer2.value = false
}

function confirmPrinter() {
  let pf_filter = reactive({});
  Object.assign(pf_filter, props.pFilter);
  if (!printer_id.value) {
    ElMessage.error("请选择打印机");
    return;
  }
  pf_filter['printer_id'] = printer_id.value;
  if (stallIds.value && stallIds.value.length > 0) {
    pf_filter['stall_id'] = stallIds.value || null;
  }

  if (loading.value) {
    ElMessage.error("正在提交打印，请不要重复操作");
    return
  }

  loading.value = true;
  printerOrder(pf_filter).then(res => {
    close();
  }).finally(() => {
    loading.value = false;
  })
}

onMounted(() => {
});

</script>

<template>
  <el-drawer v-model="props.visible" @close="close" size="720" style="width: 640px;" v-loading="loading">
    <template #header>
      <h4 style="margin: 0px;">订单打印 - {{ props.printerType == 'label' ? '品单' : '订单' }}</h4>
    </template>
    <template #default>
      <el-table :data="lists" v-if="props.pFilter.printerType == 'stall'">
        <el-table-column prop="stall_title" label="档口" width="200"/>
        <el-table-column prop="menu_title" label="菜单" />
        <el-table-column prop="product_title" label="菜品"/>
        <el-table-column prop="amount" label="菜品数"/>
      </el-table>

      <el-table :data="lists" v-else>
        <el-table-column prop="province_title" label="楼栋" width="200"/>
        <el-table-column prop="city_title" label="楼层" width=""/>
        <el-table-column prop="order_amount" label="订单数"/>
        <el-table-column prop="product_amount" label="菜品数"/>
      </el-table>
    </template>

    <template #footer>
      <div class="footer">
        <el-row class="ft-row" v-if="props.pFilter.printerType == 'label'">
          <el-col class="col-t" :span="5">请选择出单档口：
            <div class="ttip">不选打印所有档口</div>
          </el-col>
          <el-col :span="16" class="text-left">
            <el-checkbox-group v-model="stallIds">
              <el-checkbox :label="prow.title" :value="prow.id" :key="prow.id" v-for="prow in stallList"/>
            </el-checkbox-group>
          </el-col>
        </el-row>
        <el-row class="ft-row">
          <el-col class="col-t" :span="5">请选择打印机：</el-col>
          <el-col :span="10" style="text-align: left">
            <el-select v-model="printer_id">
              <el-option :label="op.title || ''" v-for="op in printerList" :value="Number(op.id)"/>
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="confirmPrinter" style="display: inline-block;">
              <el-icon style="margin-right: 5px;margin-top: 1px;"><Select/></el-icon>
              确认无误，打印
            </el-button>
          </el-col>
        </el-row>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped>

.ft-row {
  padding: 10px 0px 5px;
}

.ft-row .col-t {
  font-size: 14px;
  line-height: 35px;
  font-weight: bolder;
}

.ft-row .col-t .ttip {
  font-size: 12px;
  color: red;
  line-height: 20px;
  margin-right: 10px;
}

.el-dropdown-link {
  position: relative;
  top: 3px;
  font-weight: bolder;
}

.el-dropdown-link.is-link {
  border-color: transparent !important;
  border: 0px !important;
}

/deep/ .el-card__body {
  padding: 0 !important;
}

.footer {
  border-top: 1px solid #eee;
  padding-top: 20px;
}


.card-block.card-half {
  width: 50%;
  float: left;
}


</style>
